<template>
	<view>
		<view class="content">
			<image src="/static/logo.png" mode=""></image>
			<view class="test">
				伊可库商家管理平台
			</view>
		</view>
		<view class="cont">
			<view class="flex_cont">
				<view class="ites"
				 :class="index==0?'actites':''" @click="change(0)">
					验证码登录
					<view class="t" v-if="index == 0"></view>
				</view>
				<view class="ites" 
				:class="index==1?'actites':''"
				@click="change(1)">
					密码登录
					<view class="t" v-if="index == 1"></view>
				</view>
			</view>
			<view class="" v-if="index==0">
				<view class="inputs">
					<input v-model="params.phone" type="number" maxlength="11" placeholder-class="input" placeholder="请输入手机号" />
				</view>
				<view class="inputs">
					<input v-model="params.code" type="number" placeholder-class="input" placeholder="请输入验证码" />
					<view class="" @click="getPhonecode">
						{{codeBtn.codeText}}
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="inputs">
					<input v-model="params.phone" type="number" maxlength="11" placeholder-class="input" placeholder="请输入手机号" />
				</view>
				<view class="inputs">
					<input v-model="params.pwd" type="text" :password="isshow"  placeholder-class="input" placeholder="请输入密码" />
					<uni-icons @click="isshow=!isshow" :type="isshow?'eye-slash':'eye'" size="23" color="#979797"></uni-icons>
					<!-- <uni-icons @click="isshow=false" type="eye" size="23" color="#979797"></uni-icons> -->
				</view>
			</view>
			
			<view class="btns">
				<view class="btn" @click="gologin">
					登录
				</view>
			</view>
			<view class="rzhu" @click="pagesettled">
				商家入驻
				<uni-icons color="#979797" type="right"></uni-icons>
			</view>
			
		</view>
	<!-- 	<view class="xy" @click="handlexy">
			<image v-if="isyes" src="../../static/yuana.png" mode=""></image>
			<image v-else src="../../static/yuan.png" mode=""></image>
			<view class="">
				我已阅读并同意<span @click.stop="$pageGo('/pages/user/about?id=4')">商家协议</span>及<span @click.stop="$pageGo('/pages/user/about?id=3')">隐私政策</span>
			</view>
		</view> -->
		
		<view class="tipsre">
			<view class="">
				<view class="abssjs" v-if="istrue">
					请先阅读并同意 商家协议 及 隐私政策
				</view>
				<view class="xy" @click="handlexy">
					<image v-if="isyes" src="../../static/yuana.png" mode=""></image>
					<image v-else src="../../static/yuan.png" mode=""></image>
					<view class="">
						我已阅读并同意<span @click.stop="$pageGo('/pages/user/about?id=4')">商家协议</span>及<span @click.stop="$pageGo('/pages/user/about?id=3')">隐私政策</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getmerchantLogin,getpwdLogin,getCode
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				isshow:true,
				isyes: false,
				istrue:false,
				params: {
					phone:'',
					code:'',
					pwd:'',
				},
				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
				index:0
			};
		},
		onShow() {
			uni.removeStorageSync('sjtoken')
		},
		methods:{
			gologin(){
				if(this.isyes == false){
					this.istrue = true
					return
				}
				if(this.params.phone == ''){
					uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
					return
				}
				if(this.index == 1){
					if(this.params.pwd == ''){
						uni.showToast({
							icon:'none',
							title:'请输入密码'
						})
						return
					}
					getpwdLogin(this.params).then(res=>{
						if(res.data.shop.audit == '审核中'){
							uni.navigateTo({
								url:`/pages/index/settled?type=${res.data.shop.audit}&&reason=${res.data.shop.auditDescribe}`
							})
						}else if(res.data.shop.audit == '审核驳回'){
							uni.navigateTo({
								url:`/pages/index/settled?type=${res.data.shop.audit}&&reason=${res.data.shop.auditDescribe}`
							})
						}else{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
						uni.setStorageSync('sjtoken', res.data.token)
					})
				}else{
					if(this.params.code == ''){
						uni.showToast({
							icon:'none',
							title:'请输入验证码'
						})
						return
					}
					getmerchantLogin(this.params).then(res=>{
						console.log(res.data.shop.audit);
						if(res.data.shop.audit == '审核中'){
							uni.navigateTo({
								url:`/pages/index/settled?type=${res.data.shop.audit}&&reason=${res.data.shop.auditDescribe}`
							})
						}else if(res.data.shop.audit == '审核驳回'){
							uni.navigateTo({
								url:`/pages/index/settled?type=${res.data.shop.audit}&&reason=${res.data.shop.auditDescribe}`
							})
						}else{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
						uni.setStorageSync('sjtoken', res.data.token)
					})
				}
			},
			pagesettled(){
				uni.navigateTo({
					url:'/pages/index/settled'
				})
			},
			change(type){
				console.log(type);
				this.index = type
			},
			handlexy() {
				this.isyes = !this.isyes
				if (this.isyes) {
					this.istrue = false
				}
			},
			getPhonecode() {
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(this.params.phone == ''){
					uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
					return
				}
				if(!reg_tel.test(this.params.phone)){
					uni.showToast({
						icon:'none',
						title:'请正确输入手机号'
					})
					return
				}
				if (this.codeBtn.codeStatus) {
					getCode({
						phone: this.params.phone
					}).then(res => {
						if(res.code == 200){
							this.codeBtn.codeStatus = false
							let timerId = setInterval(() => {
								let codetime = this.codeBtn.codeTime
								codetime--
								this.codeBtn.codeTime = codetime
								this.codeBtn.codeText = codetime + "s"
								if (codetime < 1) {
									clearInterval(timerId)
									this.codeBtn.codeText = "重新获取"
									this.codeBtn.codeTime = 60
									this.codeBtn.codeStatus = true
								}
							}, 1000)
						}
					})
					
				}
			
			}
		}
	}
</script>

<style lang="scss">
.content{
	width: 750rpx;
	height: 646rpx;
	background: linear-gradient( 180deg, #DEFFD6 0%, #FFFFFF 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	text-align: center;
	image{
		margin-top: 236rpx;
		width: 108rpx;
		height: 148rpx;
	}
	.test{
		margin-top: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
	}
}
.cont{
	width: 670rpx;
	margin: 0 auto;
	.flex_cont{
		display: flex;
		width: 670rpx;
		margin: 0 auto 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #979797;
		.ites{
			.t{
				width: 60rpx;
				height: 4rpx;
				background-color: #000;
				margin: 10rpx auto;
			}
		}
		.ites:last-child{
			margin-left: 60rpx;
		}
		.actites{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
	}
	.inputs {
		width: 670rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #000000;
		padding: 28rpx 30rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		margin-bottom: 40rpx;
	
		input {
			flex: 1;
		}
	
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.input {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #D9D5D4;
	}
	
	.btns {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		line-height: 100rpx;
		text-align: center;
	
		.btn {
			width: 670rpx;
			height: 100rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-bottom: 40rpx;
			color: #FFFFFF;
		}
	}
	.rzhu{
		margin: 0 auto;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #979797;
	}
}
	.tipsre {
		width: 100%;
		position: fixed;
		bottom: 60rpx;
		width: 520rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		.abssjs {
			width: 520rpx;
			background: rgba(0, 0, 0, 0.8);
			border-radius: 10rpx;
			position: relative;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			color: #FFFFFF;
			margin: 15rpx auto;
		}
	
		.abssjs:after {
			content: "";
			border: 12rpx solid rgba(0, 0, 0, 0.8);
			border-top-color: rgba(0, 0, 0, 0.8);
			border-right-color: transparent;
			border-bottom-color: transparent;
			border-left-color: transparent;
			width: 0px;
			height: 0px;
			position: absolute;
			left: 35rpx;
			font-size: 26rpx;
			bottom: -24rpx;
		}
		.xy {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #D1D1D6;
			text-align: center;
			width: 520rpx;
			margin: 0 auto;
			span {
				color: #000;
				margin: 0 6rpx;
			}
	
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>
